<template>
    <a-layout class="modern-about">
      <!-- 动态横幅 -->
      <a-carousel autoplay class="hero-banner">
        <img  v-for="(img, index) in banners" :key="index" :src="img" />
      </a-carousel>
  
      <!-- 数据展示模块 -->
      <div class="data-blocks">
        <a-card 
          v-for="(item, index) in stats" 
          :key="index" 
          class="glow-card"
          :style="{ background: item.gradient }"
        >
          <div class="stat-content">
            <component :is="item.icon" class="stat-icon" />
            <a-statistic 
              :value="item.value" 
              :suffix="item.suffix"
              :value-style="{ color: 'white' }"
            />
            <div class="stat-title">{{ item.title }}</div>
          </div>
        </a-card>
      </div>
  
      <!-- 时间轴与简介 -->
      <a-row :gutter="[40, 20]" class="timeline-section">
        <a-col :md="12" :xs="24">
          <a-card class="modern-card floating">
            <a-typography-title :level="3">发展历程</a-typography-title>
            <a-timeline >
                <a-timeline-item>Create a services site 2025-01-01</a-timeline-item>
                <a-timeline-item>Solve initial network problems 2025-01-11</a-timeline-item>
                <a-timeline-item>Technical testing 2025-02-25</a-timeline-item>
                <a-timeline-item>Network problems being solved 2025-03-05</a-timeline-item>
            </a-timeline>
          </a-card>
        </a-col>
        <a-col :md="12" :xs="24">
          <a-card class="modern-card floating">
            <a-typography-title :level="3">创新理念</a-typography-title>
            <a-typography-paragraph class="gradient-text">
              {{ innovationText }}
            </a-typography-paragraph>
          </a-card>
        </a-col>
      </a-row>
  
      <!-- 团队展示 -->
      <div style="margin-left: 20px;">
        <a-typography-title :level="2">核心成员</a-typography-title>
      <a-card class="team-section" style="width: 240px">
       
        
          <template #cover>
            <img alt="example" src="http://121.43.62.222:9000/sph/touxiang.jpg" />
          </template>
         <a-card-meta title="微信号">
      <template #description>huya22375074</template>
            </a-card-meta>
         
       
      </a-card>
      </div>

      <!-- <a-card hoverable style="width: 240px">
    <template #cover>
      <img alt="example" src="http://121.43.62.222:9000/sph/touxiang.jpg" />
    </template>
    <a-card-meta title="Europe Street beat">
      <template #description>www.instagram.com</template>
    </a-card-meta>
  </a-card> -->
  
      <!-- 合作伙伴 -->
      <!-- <div class="partners-grid">
        <img 
          v-for="(logo, index) in partners" 
          :key="index" 
          :src="logo" 
          class="partner-logo"
        />
      </div> -->
    </a-layout>
  </template>
  
  <script setup>
  import { reactive } from 'vue';
  import { RocketFilled } from '@ant-design/icons-vue';
  
  // 数据配置
  const banners = reactive([
    'http://121.43.62.222:9000/sph/yuanyao.jpg',
    'http://121.43.62.222:9000/sph/ziling.jpg'
  ]);

  const innovationText = "‌个性化智能点播，让每一次点击都跃动着你的独特旋律，智享专属视听盛宴‌。"
  
  const stats = reactive([
    { 
      title: '创新项目', 
      value: 150, 
      suffix: '+', 
      gradient: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
      icon: RocketFilled
    },
    // 其他统计项...
  ]);
  
  
  const team = reactive([
    { 
      name: 'Zkebrb Huang', 
      role: '首席技术官',
      avatar: 'http://121.43.62.222:9000/sph/touxiang.jpg',
      social: { linkedin: '#', twitter: '#' }
    }
  ]);
  
  const partners = reactive([
    'http://121.43.62.222:9000/sph/touxiang.jpg',
    // 其他合作伙伴...
  ]);
  </script>
  
  <style scoped>
  .modern-about {
    background: #f8fafc;
  }
  
  /* 动态横幅 */
  .hero-banner {
    width: 100%;
    margin: 0 auto;
  }
   ::v-deep .slick-slide  img {
        max-width: 100%; /* 图片的最大宽度为其父容器的宽度 */
        height: auto!important; /* 让高度自动调整以保持宽高比 */
        max-height: 500px; 
        object-fit: cover;
        /* height: 400px!important; */
        /* object-fit: cover;
        filter: brightness(0.8); */
      
    }
  
  /* 数据卡片 */
  .data-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin: -80px 24px 0;
    position: relative;
    z-index: 1;
  }
  
  .glow-card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    
    &:hover {
      transform: translateY(-5px);
    }
  }
  
  /* 时间轴模块 */
  .timeline-section {
    padding: 80px 24px;
  }
  
  .modern-card {
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    
    &.floating {
      animation: float 6s ease-in-out infinite;
    }
  }
  
  /* 合作伙伴 */
  .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 40px;
    padding: 40px;
    background: white;
    
    .partner-logo {
      filter: grayscale(1);
      opacity: 0.6;
      transition: all 0.3s;
      
      &:hover {
        filter: none;
        opacity: 1;
      }
    }
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
  }
  
  @media (max-width: 768px) {
    .data-blocks {
      margin-top: -40px;
    }
    
    .hero-banner {
      height: 40vh;
    }
  }
  </style>
  